<div>
  <div class="list">
    <h2>To do</h2>
    <cdk-drop
      #one
      (dropped)="drop($event)"
      [data]="todo"
      [connectedTo]="[two]">
      <div *ngFor="let item of todo" cdkDrag>
        {{item}}
        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
      </div>
    </cdk-drop>
  </div>

  <div class="list">
    <h2>Done</h2>
    <cdk-drop
      #two
      (dropped)="drop($event)"
      [data]="done"
      [connectedTo]="[one]">
      <div *ngFor="let item of done" cdkDrag>
        {{item}}
        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
      </div>
    </cdk-drop>
  </div>
</div>

<div>
  <div class="list horizontal">
    <h2>Horizontal list</h2>
    <cdk-drop
      orientation="horizontal"
      (dropped)="drop($event)"
      [data]="horizontalData">
      <div *ngFor="let item of horizontalData" cdkDrag>
        {{item}}
        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
      </div>
    </cdk-drop>
  </div>
</div>

<div>
  <h2>Data</h2>
  <pre>{{todo.join(', ')}}</pre>
  <pre>{{done.join(', ')}}</pre>
  <pre>{{horizontalData.join(', ')}}</pre>
</div>

<div class="list">
  <h2>Free dragging</h2>
  <div cdkDrag class="free-draggable">Drag me around</div>
</div>
